<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="backstage/css/pintuer.css">
<link rel="stylesheet" href="backstage/css/admin.css">
<script src="backstage/js/jquery.js"></script>
<script src="backstage/js/pintuer.js"></script>
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	.active{
		background-color: #0099CC;
	}
</style>
</head>
<body>

  <div class="panel admin-panel" id="app">
    <div class="panel-head"><strong class="icon-reorder">文章列表</strong> <a href="admin.do?exit=yes" style="float:right; ">退出登录</a></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
        <li> <a class="button border-main icon-plus-square-o" href="./add.do"> 添加博文</a> </li>
        <li>搜索：</li>
          <li>
            <select name="cid" class="input" style="width:200px; line-height:17px;" @change="changesearch">
			<!-- 文章类型 -->
              <option value="0">请选择分类</option>
              	<option v-for="type in types" :value="type.tid">{{type.tName}}</option>
            </select>
          </li>
        <li>
          <input type="text" placeholder="请输入搜索关键字" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />
          <a href="javascript:void(0)" class="button border-main icon-search" @click="changesearch" > 搜索</a></li>
      </ul>
    </div>
    <table class="table table-hover text-center">
      <tr>
        <th width="100" style="text-align:left; padding-left:20px;">ID</th>
        <th>图片</th>
        <th>名称</th>
        <th>点击数量</th>
        <th>分类名称</th>
        <th width="10%">最近一次修改时间</th>
        <th width="310">操作</th>
      </tr>
		   <!-- 具体一个 -->
		   <template v-if="pageList.contentList.length>0">
			 <tr v-for="article in pageList.contentList">
	          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />{{article.aid}}</td>
	          <td width="10%"><img :src="article.img" alt="" width="70" height="50" /></td>
	          <td>{{article.title}}</td>
	          <td><font color="#00CC99">{{article.consult}}</font></td>
	          <td>{{article.tid==1?'个人笔记':'其他'}}</td>
	          <td>{{article.changeDate==null?article.createTime:article.changeDate}}</td>
	          <td><div class="button-group"> <a class="button border-main" :href="'change.do?aid='+article.aid"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" @click="del(article.aid)"><span class="icon-trash-o"></span> 删除</a> </div></td>
	        </tr>
			</template>
			<!-- 一个结束 -->
			<template v-else>
				<tr>
					<td colspan="7" align="center">
						没有查到该数据
					</td>
					
				</tr>
				
			</template>
      <tr>
        <td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" id="checkall"/>
          全选 </td>
        <td colspan="7" style="text-align:left;padding-left:20px;"><a href="javascript:void(0)" class="button border-red icon-trash-o" style="padding:5px 15px;" onclick="DelSelect()"> 删除</a> </td>
      </tr>
      <tr>
        <td colspan="8"><div class="pagelist">
		 <a  v-if="pageList.indexPage>1" href="javascript:void(0)" @click="pageClick(pageList.indexPage-1)">上一页</a>
		 <a v-for="index in indexs" href="javascript:void(0)" @click="pageClick(index)" :class="{'active': pageList.indexPage==index}">{{index}}</a>
		 <a v-if="pageList.indexPage<pageList.totalPageCount" href="javascript:void(0)" @click="pageClick(pageList.indexPage+1)">下一页</a>
		 <a href="javascript:void(0)" @click="pageClick(pageList.totalPageCount)">尾页</a>
		 </div>
		 </td>
      </tr>
	
    </table>
  </div>
<script type="text/javascript">
//全选
$j("#checkall").click(function(){ 
  $j("input[name='id[]']").each(function(){
	  if (this.checked) {
		  this.checked = false;
	  }
	  else {
		  this.checked = true;
	  }
  });
})

//批量删除
function DelSelect(){
	var Checkbox=false;
	 $j("input[name='id[]']").each(function(){
	  if (this.checked==true) {		
		Checkbox=true;	
	  }
	});
	if (Checkbox){
		var t=confirm("您确认要删除选中的内容吗？");
		if (t==false) return false;		
		alert("对不起不能批量删除")	
	}
	else{
		alert("请选择您要删除的内容!");
		return false;
	}
}


</script>
<script type="text/javascript">
	const vm=new Vue({
		el:"#app",
		data:{
			types:${sessionScope.allType},
			pageList:${sessionScope.articles}
		},
		methods:{
			 changesearch(){
				let svalue=$j('select').val();
				var keywords=$j("input[name=keywords]").val();
				$j.get("list.do","typeId="+svalue+"&keywords="+keywords,function(e){
					vm.pageList=e;
				},"json");
			 },
			 pageClick(cur){
					//传过来的页码一定要不等于当前页码
					if(cur!=vm.pageList.indexPage){
						let svalue=$j('select').val();
						var keywords=$j("input[name=keywords]").val();
						$j.get("list.do","typeId="+svalue+"&keywords="+keywords+"&cur="+cur,function(e){
							vm.pageList=e
						},"json")
					}
				 },
			 del(aid){
					 if(confirm("您确定要删除吗? 包括该文章下的所有评论")){
					 	$j.get("change.do","delAid="+aid,function(e){
							if(e=="true")
							vm.$options.methods.changesearch();
							else
							alert("删除失败");
						})	
					 }
				 }
			 
		},
		computed:{
			//分页
			indexs: function(){
				var left = 1;
				var right = this.pageList.totalPageCount;//总页数
				var ar = [];
				if(this.pageList.totalPageCount>= 5){
						if(this.pageList.indexPage > 3 && this.pageList.indexPage < this.pageList.totalPageCount-2){
						left = this.pageList.indexPage - 2
						right = this.pageList.indexPage + 2
					}else{
					if(this.pageList.indexPage<=3){
						left = 1
						right = 5
					}else{
						right = this.pageList.totalPageCount
						left = this.pageList.totalPageCount -4
					}
				}
			}
				while (left <= right){
					ar.push(left)
					left ++
				}
				return ar
			}
		}
	})
</script>
</body>
</html>